import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  clickImage = ""
  clickImage2 = ""
  clickThumb = ""

  slideImage = ""
  slideThumbImage = ""

  rotateImage = ""
  rotateThumb = ""

  clickData = {
    image: this.clickImage,
    thumb: this.clickThumb,
  }

  clickEvents = {
    click(x: number, y: number): void {
      console.log("click >>>>>>>", x, y)
    },
    confirm(dots: any, clear: Function): void {
      console.log("dots >>>>>>>", dots)

      setTimeout(() => {
        clear()
      }, 100)
    },
    refresh(): void {
      console.log("refresh >>>>>>>")
    },
    close(): void {
      console.log("close >>>>>>>")
    }
  }

  slideData = {
    thumbX: 20,
    thumbY: 20,
    thumbWidth: 80,
    thumbHeight: 80,
    image: this.slideImage,
    thumb: this.slideThumbImage,
  }

  slideEvents = {
    move(x: number, y: number): void {
      console.log("move >>>>>>>", x, y)
    },
    confirm(point: any, clear: Function): void {
      console.log("point >>>>>>>", point)

      setTimeout(() => {
        clear()
      }, 100)
    },
    refresh(): void {
      console.log("refresh >>>>>>>")
    },
    close(): void {
      console.log("close >>>>>>>")
    }
  }

  slideRegionData = {
    thumbX: 20,
    thumbY: 20,
    thumbWidth: 80,
    thumbHeight: 80,
    image: this.slideImage,
    thumb: this.slideThumbImage,
  }
  slideRegionEvents = {
    move(x: number, y: number): void {
      console.log("move >>>>>>>", x, y)
    },
    confirm(point: any, clear: Function): void {
      console.log("point >>>>>>>", point)

      setTimeout(() => {
        clear()
      }, 100)
    },
    refresh(): void {
      console.log("refresh >>>>>>>")
    },
    close(): void {
      console.log("close >>>>>>>")
    }
  }

  rotateData = {
    angle: 20,
    image: this.rotateImage,
    thumb: this.rotateThumb,
  }

  rotateEvents = {
    rotate(angle: number): void {
      console.log("rotate >>>>>>>", angle)
    },
    refresh(): void {
      console.log("refresh >>>>>>>")
    },
    close(): void {
      console.log("close >>>>>>>")
    }
  }

  handleEvent() {
    console.log(">>>>>> click")
  }
}
